<template>
	<view class="item-info" :class="openShow === 0 ? 'none' : openShow === 1 ? 'show' : ''">
		<view class="cate-content">
			<view class="item-fixed-top">
				<view class="title">{{title}}</view>
				<view class="close" @click="show">
					<image src="../../static/images/close.png" mode="scaleToFill"></image>
				</view>
			</view>
			<view class="info-box">
				<view class="o-d-m-bx">
					<text>{{ordPayLbTxt}}</text>
					<view class="n-o-price-box">
						<view class="price-1">{{price}}</view>
						<view class="price-2">{{gdOrgPriceLbTxt + " "}}{{priceObj.amount_od}}</view>
					</view>
				</view>
				<view class="o-o-f-i-box">
					<view class="o-c-pri-box">
						<text>{{gdYhLbTxt}}</text>
						<input v-if="(Number(zeroInput) > 0)" class="z-price" :value="zeroInput" type="number" @input="zeroInputHanlder"/>
						<text class="z-price" v-else>{{zeroInput}}</text>
					</view>
					<view class="o-c-pri-box" v-if="type!='YY'">
						<text>{{freightLbTxt}}</text>
						<input class="f-price" :value="freiInput"  type="number" @input="freiInputHandler"/>
					</view>
				</view>
				<view class="o-d-m-bx o-d-m-bx-10">
					<text>{{changeTotalPricLbTxt}}</text>
					<text class="t-price">{{priceObj.amount_all}}</text>
				</view>
			</view>
			
			<view class="btn-box">
				<text class="c-btn" @click="show">{{cancelTxt}}</text>
				<text class="f-btn" @click="confim">{{confimPriceTxt}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import Config from "../../js/conf/Config";
	import lang from "../../js/conf/Lang.js";
	export default {
		props: ['type'],
		data() {
			return {
				title : "", // "修改价格",
				ordPayLbTxt : "",//"订单应付金额",
				gdOrgPriceLbTxt : "",//产品原价
				gdYhLbTxt : "",//"产品优惠价",
				changeTotalPricLbTxt : "",//"修改后的订单应付金额",

				freightLbTxt: lang.freightLbTxt,//运费
				confimPriceTxt:lang.confimPriceTxt,
				cancelTxt : lang.cancel,
				openShow : 0,
				
				priceObj : {
					amount_shipp:"",
					amount_zero:"",
					amount_all:"",
					amount_od:"",
				},
				
				zeroInput:"",
				
				freiInput:"",
				
				price:"",
			};
		},
		created () {
				let typeClass = this.type != "YY"?"changePriceWin":"YyChangePriceWin"
				this.title = lang[typeClass].title; // "修改价格",
				this.ordPayLbTxt = lang[typeClass].ordPayLbTxt;//"订单应付金额",
				this.gdOrgPriceLbTxt = lang[typeClass].gdOrgPriceLbTxt;//产品原价
				this.gdYhLbTxt = lang[typeClass].gdYhLbTxt;//"产品优惠价",
				this.changeTotalPricLbTxt = lang[typeClass].changeTotalPriceLbTxt;//"修改后的订单应付金额",
		},
		mounted() {
		},
		
		methods: {
			/**显示添加费用**/
			show(type,data) 
			{
				let timer = type === 'show' ? 10 : 200;
				let state = type === 'show' ? 1 : 0;
				this.openShow = 2;
				setTimeout(() => {
					this.openShow = state;
					if(state == 1)
					{
						this.initData(data);
					}
				}, timer);
			},
			
			initData(data)
			{
				data.amount_shipp = data.amount_shipp||0;
				this.priceObj = data; 
				this.zeroInput = data.amount_zero||0;
				this.freiInput = data.amount_shipp||0;
				this.price = data.amount_all||0;
			},
			
			zeroInputHanlder(e)
			{
				let value = e.detail.value;
				this.priceObj.amount_zero = Number(value);

				if (this.type !='YY' ) {
					this.commonCount (`${value}+${this.priceObj.amount_shipp}`)
					return
				}
				this.priceObj.amount_all = Number(value) + Number(this.priceObj.amount_shipp);
			},
			
			freiInputHandler(e)
			{
				let value = e.detail.value;
				this.priceObj.amount_shipp = value||0;
				if (this.type !='YY' ) {
					this.commonCount (`${value}+${this.priceObj.amount_zero}`)
					return
				}
				this.priceObj.amount_all = Number(value) + Number(this.priceObj.amount_zero);
			},
			async commonCount (formula) {
				let url = Config.COMMON_COUNT
				let param = {
					formula: formula,
				}
				let res = this.$api({url:url,data:param});
				if(!res.status) return false
				this.priceObj.amount_all = res.data
			},	
			confim()
			{
				if (this.priceObj.amount_zero <= 0) {
					this.$confirm(`是否将服务优惠价改成${this.priceObj.amount_zero}元？修改后将不可以再改价！`, '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.$emit("changePrice",this.priceObj);
						this.show();
					}).catch(() => {});
				} else {
					this.$emit("changePrice",this.priceObj);
					this.show();
				}
			},
		},
	}
</script>
<style lang="scss">
	.mask {
		display: flex;
		align-items: flex-end;
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0);
		z-index: 9999;
		transition: 0.3s;
		.mask-content {
			width: 100%;
			max-height: 250px;
			background: #f3f3f3;
			transform: translateY(100%);
			transition: 0.3s;
		}
		&.none {
			display: none;
		}
		&.show {
			background: rgba(0, 0, 0, 0.4);
			.mask-content {
				transform: translateY(0);
			}
		}
	}
	.item-info {
		position: fixed;
		z-index: 999;
		left: 0;
		top: 0;
		bottom: 0;
		width: 100%;
		background: #FFF;
		transition: 0.3s;
		overflow-y: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		.cate-content {
			border-radius: 6px;
			overflow: hidden;
			width: 400px;
			background: #F8F8F8;
			float: right;
			transform: translateY(-100%);
			transition: 0.3s;
			position: relative;
			background-color: #EEE;
			.item-fixed-top
			{
				height: 50px;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 14px;
				background-color: #fff;
				border-bottom: 1px solid #ECECEC;
				.title
				{
					font-size: 16px;
				}
				.close
				{
					position: absolute;
					right: 5px;
					top: 12px;
					width: 32px;
					height: 32px;
					text-align: center;
					cursor: pointer;
					image
					{
						width: 14px;
						height: 14px;
					}
				}
			}
			
			.info-box
			{
				// margin: 10px;
				font-size: 14px;
				margin-top: 10px;
				margin-bottom: 10px;
				.o-d-m-bx
				{
					background-color: #fff;
					display: flex;
					padding-left: 10px;
					padding-right: 10px;
					padding-top: 20px;
					padding-bottom: 20px;
					align-items: center;
					position: relative;
					.n-o-price-box
					{
						position: absolute;
						right: 10px;
						.price-1
						{
							text-align: right;
							font-size: 16px;
							font-weight: bold;
							color: red;
						}
					}
					
					.t-price
					{
						position: absolute;
						right: 10px;
						color: red;
					}
				}
				
				.o-d-m-bx-10
				{
					padding-top: 10px;
					padding-bottom: 10px;
				}
				
				.o-o-f-i-box
				{
					// padding: 10px;
					background-color: #fff;
					margin-top: 10px;
					margin-bottom: 10px;
					padding-left: 10px;
					padding-right: 10px;
					.o-c-pri-box
					{
						padding-top: 10px;
						padding-bottom: 10px;
						display: flex;
						align-items: center;
						position: relative;
						.z-price, .f-price
						{
							position: absolute;
							right: 0px;
							text-align: right;
						}
					}
				}
			}
			
			.btn-box
			{
				width: 100%;
				height: 50px;
				display: flex;
				font-size: 14px;
				cursor: pointer;
				.c-btn{
					color: #333;
					line-height: 50px;
					width: 50%;
					height: 100%;
					text-align: center;
					background-color: #fff;
				}
				.f-btn{
					color: #FFF;
					line-height: 50px;
					width: 50%;
					text-align: center;
					height: 100%;
					background-color: #3388ff;
				}
				
			}
		}
	
		&.none {
			display: none;
		}
		&.show {
			background: rgba(0, 0, 0, 0.3);
			.cate-content {
				transform: translateY(0);
			}
		}
	}
</style>